<template>
  <view class="video">
    <view class="video-cont" @click.stop="show = true">
      <view class="video-cover"></view>
      <video :controls="false" class="video-item" :src="src"></video>
    </view>
    <van-popup v-model:show="show">
      <video controls class="video-full" :src="src"></video>
    </van-popup>
  </view>
</template>

<script setup>
import { ref } from 'vue';
const show = ref(false);
const props = defineProps({
  src: String
})
</script>

<style lang="scss" scoped>
.video {
  width: 200rpx;
  height: 200rpx;
  &-cont {
    position: relative;
  }
  &-cover {
    position: absolute;
    left: 0;
    top: 0;
    width: 200rpx;
    height: 200rpx;
    z-index: 100;
  }
  &-item {
    width: 200rpx;
    height: 200rpx;
    vertical-align: top;
  }
}
</style>